<template>
  <section class="chartLayout">
    <section class="chartContent">
      <div class="middleCard">
        <div class="card padding-sm h-100">
          <Chart
            id="echarts"
            height="500px"
            :full-options="chartConfig"
            :full-data="chartsData"
          />
        </div>
      </div>
      <div class="sideCardRight">
        <div class="card">
          <t-radio-group
            v-model="currentConfig"
            variant="default-filled"
            class="chartRadio"
          >
            <t-radio-button :value="1">图表库</t-radio-button>
            <t-radio-button :value="2">功能设置</t-radio-button>
            <t-radio-button :value="3">组件样式</t-radio-button>
          </t-radio-group>
          <section>
            <template v-if="currentConfig == 1">
              <div class="chartTypeList">
                <ul class="chartTypeName">
                  <li
                    v-for="(item, index) in chartTypeGroup"
                    :key="index"
                    :class="{ active: currentChartGroup == index }"
                    @click="selectedChartGroup(index)"
                  >
                    {{ item.title }}
                  </li>
                </ul>
                <ul class="chartChildrenSet">
                  <li
                    v-for="(citem, cindex) in chartTypeGroup[currentChartGroup]
                      .children"
                    :class="{
                      active: chartConfig.currentChartType == citem.url,
                    }"
                    :key="cindex"
                    @click="selectedChartType(citem.url)"
                  >
                    <t-popup trigger="hover">
                      <template #content>
                        <div>
                          <b>{{ citem.name }}</b>
                          <p>{{ citem.tips }}</p>
                        </div>
                      </template>
                      <img :src="getChartImageUrl(citem.url)" alt="" />
                    </t-popup>
                  </li>
                </ul>
              </div>
            </template>
            <template v-else-if="currentConfig == 2">
              <t-form :data="chartConfig" label-align="top" :label-width="60">
                <t-form-item label="图表标题">
                  <div class="flex flex-column gap-sm w-100">
                    <t-checkbox v-model="chartConfig.chartTitle.show"
                      >显示标题</t-checkbox
                    >
                    <t-input
                      v-model="chartConfig.chartTitle.text"
                      show-limit-number
                      :maxlength="20"
                      placeholder="请输入标题"
                    />
                    <t-checkbox v-model="chartConfig.chartTips.show"
                      >显示指标说明</t-checkbox
                    >
                    <t-textarea
                      v-model="chartConfig.chartTips.text"
                      :autosize="{ minRows: 3, maxRows: 5 }"
                      :maxlength="100"
                      placeholder="请输入指标说明"
                    />
                  </div>
                </t-form-item>
                <template
                  v-if="
                    !noEcharts.includes(chartTypeGroup[currentChartGroup].title)
                  "
                >
                  <t-form-item
                    label="数据标签"
                    v-show="
                      !isShow_noLabel.includes(
                        chartTypeGroup[currentChartGroup].title,
                      )
                    "
                  >
                    <div class="flex flex-column gap-sm">
                      <t-checkbox
                        v-model="chartConfig.chartOption.series.label.show"
                        >显示数据标签</t-checkbox
                      >
                      <div
                        class="flex gap"
                        v-show="
                          isShow_labelFmt.includes(chartConfig.currentChartType)
                        "
                      >
                        <t-checkbox
                          v-model="
                            chartConfig.chartOption.series.label.style.number
                          "
                          >显示数值</t-checkbox
                        >
                        <t-checkbox
                          v-model="
                            chartConfig.chartOption.series.label.style.percent
                          "
                          >显示百分比</t-checkbox
                        >
                      </div>
                    </div>
                  </t-form-item>
                  <t-form-item
                    label="缩略轴"
                    v-show="
                      isShow_dataZoom.includes(
                        chartTypeGroup[currentChartGroup].title,
                      )
                    "
                  >
                    <t-checkbox v-model="chartConfig.chartOption.dataZoom.show"
                      >显示缩略轴</t-checkbox
                    >
                  </t-form-item>
                  <t-form-item
                    label="曲线"
                    v-show="
                      isShow_smooth.includes(
                        chartTypeGroup[currentChartGroup].title,
                      )
                    "
                  >
                    <t-checkbox v-model="chartConfig.chartOption.series.smooth"
                      >平滑曲线</t-checkbox
                    >
                  </t-form-item>
                  <t-form-item
                    label="线条风格"
                    v-show="isShow_radar.includes(chartConfig.currentChartType)"
                  >
                    <t-radio-group
                      v-model="chartConfig.chartOption.series.radarAreaStyle"
                    >
                      <t-radio value="line">线条</t-radio>
                      <t-radio value="area">填充</t-radio>
                    </t-radio-group>
                  </t-form-item>
                  <t-form-item
                    label="图例"
                    v-show="
                      !isShow_noLegend.includes(chartConfig.currentChartType)
                    "
                  >
                    <div class="flex flex-column gap-sm w-100">
                      <t-checkbox v-model="chartConfig.chartOption.legend.show"
                        >显示图例</t-checkbox
                      >
                      <template
                        v-if="chartConfig.currentChartType !== 'barSymmetric'"
                      >
                        <p>图例显示在图表</p>
                        <div class="flex gap-sm">
                          <t-select
                            v-model="chartConfig.chartOption.legend.position"
                            style="width: 48%"
                          >
                            <t-option label="顶部" value="top">顶部</t-option>
                            <t-option label="底部" value="bottom"
                              >底部</t-option
                            >
                            <t-option label="左侧" value="left">左侧</t-option>
                            <t-option label="右侧" value="right">右侧</t-option>
                          </t-select>
                          <t-select
                            v-model="chartConfig.chartOption.legend.orient"
                            style="width: 48%"
                          >
                            <t-option label="横向排列" value="horizontal"
                              >横向排列</t-option
                            >
                            <t-option label="纵向排列" value="vertical"
                              >纵向排列</t-option
                            >
                          </t-select>
                        </div>
                      </template>
                    </div>
                  </t-form-item>
                  <t-form-item
                    label="X轴"
                    v-show="
                      isShow_xAxis.includes(
                        chartTypeGroup[currentChartGroup].title,
                      )
                    "
                  >
                    <div class="flex flex-column gap-sm w-100">
                      <t-input
                        v-model="chartConfig.chartOption.xAxis.name"
                        :maxlength="20"
                        show-limit-number
                        placeholder="请输入X轴标题"
                      />
                      <div class="flex gap-sm align-center">
                        <p>标签文字显示方向</p>
                        <t-select
                          v-model="
                            chartConfig.chartOption.xAxis.axisLabel.rotate
                          "
                          style="width: 87px"
                        >
                          <t-option label="横向" :value="0">横向</t-option>
                          <t-option label="纵向" :value="90">纵向</t-option>
                          <t-option label="左倾斜" :value="45">左倾斜</t-option>
                          <t-option label="右倾斜" :value="-45"
                            >右倾斜</t-option
                          >
                        </t-select>
                      </div>
                    </div>
                  </t-form-item>
                  <t-form-item
                    label="Y轴"
                    v-show="
                      isShow_yAxis.includes(
                        chartTypeGroup[currentChartGroup].title,
                      )
                    "
                  >
                    <div class="flex flex-column gap-sm w-100">
                      <t-input
                        v-model="chartConfig.chartOption.yAxis.name"
                        :maxlength="20"
                        show-limit-number
                        placeholder="请输入X轴标题"
                      />
                      <div class="flex gap-sm">
                        <p>最大值</p>
                        <t-input-number
                          v-model="chartConfig.chartOption.yAxis.max"
                          theme="normal"
                        />
                      </div>
                      <div class="flex gap-sm">
                        <p>最小值</p>
                        <t-input-number
                          v-model="chartConfig.chartOption.yAxis.min"
                          theme="normal"
                        />
                      </div>
                      <t-checkbox
                        v-model="chartConfig.chartOption.yAxis.inverse"
                        >倒序排列</t-checkbox
                      >
                    </div>
                  </t-form-item>
                </template>
              </t-form>
            </template>
            <template v-else>
              <t-form :data="chartConfig" label-align="top" :label-width="60">
                <t-form-item label="图表背景">
                  <t-checkbox v-model="chartConfig.style.background.show"
                    >显示背景</t-checkbox
                  >
                </t-form-item>
                <t-form-item label="背景填充">
                  <div class="flex-column">
                    <div
                      class="border inline padding-top-sm padding-bottom-sm margin-top"
                    >
                      <t-radio-group
                        v-model="chartConfig.style.background.color"
                      >
                        <div
                          class="setting-color-drawer"
                          v-for="(item, index) in themeSet"
                          :key="item"
                        >
                          <t-radio-button :value="item">
                            <div
                              class="color-container"
                              :style="{ 'background-color': item }"
                            ></div>
                          </t-radio-button>
                        </div>
                        <div class="setting-color-drawer">
                          <t-radio-button :value="customColor">
                            <t-color-picker
                              v-model="customColor"
                              :recentColors="null"
                              format="HEX"
                              enableAlpha
                              :color-modes="['monochrome']"
                              :show-primary-color-preview="true"
                            >
                              <div
                                class="color-container dynamic-color-btn"
                              ></div>
                            </t-color-picker>
                          </t-radio-button>
                        </div>
                      </t-radio-group>
                    </div>
                  </div>
                </t-form-item>
                <t-form-item label="图表边框">
                  <div class="flex-column">
                    <div class="flex gap-sm">
                      <p>边框值</p>
                      <t-input-number
                        v-model="chartConfig.chartBorder.width"
                        theme="normal"
                        suffix="px"
                      />
                    </div>
                    <div class="flex gap-sm margin-top-sm">
                      <p style="width: 42px">色值</p>
                      <t-color-picker
                        v-model="chartConfig.chartBorder.color"
                        clearable
                        :show-primary-color-preview="false"
                      />
                    </div>
                  </div>
                </t-form-item>
                <template
                  v-if="
                    noEcharts.includes(chartTypeGroup[currentChartGroup].title)
                  "
                >
                  <t-form-item label="文字大小">
                    <div class="flex-column">
                      <div class="flex gap-sm">
                        <p>标签</p>
                        <t-input-number
                          v-model="chartConfig.index.size.label"
                          theme="normal"
                          suffix="px"
                        />
                      </div>
                      <div class="flex gap-sm margin-top-sm">
                        <p>数值</p>
                        <t-input-number
                          v-model="chartConfig.index.size.number"
                          theme="normal"
                          suffix="px"
                        />
                      </div>
                    </div>
                  </t-form-item>
                  <t-form-item label="文字颜色">
                    <div class="flex-column">
                      <div class="flex gap-sm">
                        <p style="width: 42px">标签</p>
                        <t-color-picker
                          v-model="chartConfig.index.color.label"
                          clearable
                          :show-primary-color-preview="false"
                        />
                      </div>
                      <div class="flex gap-sm margin-top-sm">
                        <p style="width: 42px">数值</p>
                        <t-color-picker
                          v-model="chartConfig.index.color.number"
                          clearable
                          :show-primary-color-preview="false"
                        />
                      </div>
                    </div>
                  </t-form-item>
                </template>
              </t-form>
            </template>
          </section>
        </div>
      </div>
    </section>
  </section>
</template>
<script lang="tsx" setup>
import { ref, onMounted, watch } from 'vue';
import Chart from '@/components/Chart/index.vue';
import { chartTypeGroup } from './components/chartName';
import {
  isShow_noLegend,
  isShow_xAxis,
  isShow_yAxis,
  isShow_dataZoom,
  isShow_smooth,
  isShow_labelFmt,
  noEcharts,
  isData_noDataset,
  isShow_radar,
  isShow_noLabel,
} from './components/chartSettingShow';
import { getChartImageUrl } from '@/hooks/useImage';

// 图表配置
let currentConfig = ref(1);
let currentChartGroup = ref(0);
const selectedChartGroup = (index: number) => {
  currentChartGroup.value = index;
};
const selectedChartType = (name: string) => {
  chartConfig.value.currentChartType = name;
  currentConfig.value = 2;
};
const chartConfig = ref({
  currentChartType: '',
  chartTitle: {
    show: false,
    text: '',
  },
  chartTips: {
    show: false,
    text: '',
  },
  chartOption: {
    backgroundColor: '',
    series: {
      label: {
        show: false,
        style: {
          number: false,
          percent: false,
        },
      },
      radarAreaStyle: 'line',
      smooth: false,
    },
    legend: {
      show: true,
      orient: 'horizontal',
      position: 'bottom',
    },
    dataZoom: {
      show: false,
    },
    xAxis: {
      name: '',
      axisLabel: {
        rotate: 0,
      },
    },
    yAxis: {
      name: '',
      max: '',
      min: '',
      inverse: false,
    },
  },
  style: {
    background: {
      show: false,
      fillType: 'color',
      color: '',
    },
  },
  chartBorder: {
    width: '',
    color: '#E7E7E7',
  },
  index: {
    size: {
      label: '',
      number: '',
    },
    color: {
      label: '',
      number: '',
    },
  },
});
const chartsData = ref<any>({
  x_data: ['豹子', '狮子', '大象', '老虎'],
  lists: [
    {
      name: '指标A',
      豹子: 55,
      狮子: 66,
      大象: 77,
      老虎: 88,
    },
    {
      name: '指标B',
      豹子: 44,
      狮子: 55,
      大象: 66,
      老虎: 77,
    },
  ],
});

// 组件样式
// 主题色
const themeSet = ref([
  '#3053EB',
  '#0594FA',
  '#00A870',
  '#EBB105',
  '#ED7B2F',
  '#E34D59',
  '#ED49B4',
  '#834EC2',
]);
let customColor = ref('');
// 页面载入
onMounted(() => {
  if (!themeSet.value.includes(chartConfig.value.style.background.color)) {
    customColor.value = chartConfig.value.style.background.color;
  }
});
watch(
  () => customColor.value,
  () => {
    chartConfig.value.style.background.color = customColor.value;
  },
);
const get = () => {
  console.log(chartConfig.value);
};
</script>
<style lang="scss" scoped>
@import './config.scss';
</style>
